<template>
  <div class="engineeering">

    <div class="engineeeringLeft">
     <left-tree
        v-model="ztreeDataSource"
        @SaveEdit="SaveEdit"
        @DelNode="DelNode"
        :props="defaultProps"
        @NodeClick="handleNodeClick">
     </left-tree>
      <!-- ref="mychild"-->
    </div>
    <div class="engineeeringRight">
      <!--|| this.projectdata.data.condition. gid !== ''-->
      <div v-if=" this.active === '1'">
        <div class="Etitle">
          设备列表
        </div>
        <div class="pagination-container footerPage">
          <el-pagination
            @current-change="CurrentChange"
            @size-change="SizeChange"
            :page-sizes="[5, 10, 20, 50]"
            background layout="total, sizes, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
        <div class="ETableList">
          <el-table
            :data="projectData"
            border
            stripe border fit highlight-current-row
            style="width: 100%;height:500px; "
            height="500px"
            :header-cell-style="{background:'#f7f8f9',height: '20px',padding:'5px 0px'}"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              v-for="(column, index) in cols"
              :prop="column.prop"
              :label="column.label"
              :key="index"
              :width="column.width"
              :sortable="column.sortable"
            >
            </el-table-column>
            <el-table-column
              label="状态"
              sortable
              width="150px">
              <template slot-scope="scope">
                <span v-if="scope.row.value3 === '0'">通讯正常</span>
                <span v-if="scope.row.value3 === '1'">通讯中断</span>
                <span v-if="scope.row.value3 != '1' && scope.row.value3 != '0'">{{scope.row.value1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="操作"
              width="240px"
            >
              <template slot-scope="scope">
              <span class="viewDetail" @click="showViewEquip(scope.$index,scope.row)" title="查看" ></span>
              <span class="update" @click="showUpdateMask(scope.$index,scope.row)" title="编辑" ></span>
              <span class="delete" @click="deleteEqquip(scope.$index, scope.row)" title="删除" ></span>

                <!--<el-button class="tableIcon" title="查看" @click="showViewEquip(scope.$index,scope.row)" type="text" size="small">-->
                  <!--<img :src="detail" alt="查看"/>-->
                <!--</el-button>-->
                <!--<el-button @click="showUpdateMask(scope.$index,scope.row)" class="tableIcon" title="编辑" type="text" size="small">-->
                  <!--<img :src="redact" alt="编辑"/>-->
                <!--</el-button>-->
                <!--<div class="delete">-->
                  <!--<el-button type="text"   class="tableIcon" title="删除" @click.native.prevent="deleteEqquip(scope.$index,scope.row)">-->
                    <!--<img :src="wraningDelete" alt="删除"/>-->
                  <!--</el-button>-->
                <!--</div>-->
                <orgdelete></orgdelete>

                <el-button  class="tableIcon  Measuring" title="测点信息" type="text" size="small" @click.native.prevent="viewPointList(scope.$index,scope.row)">
                  <span  style="font-size: 12px; border: 0px solid #2BBC8C; margin-top: -18px; padding: 7px; position: absolute; color: #0072F3">测点信息</span>
                </el-button>
                <!--<el-button  class="tableIcon debug" title="调试" type="text" size="small" >-->
                  <!--<span  style="font-size: 12px; border: 1px solid #2BBC8C; margin-top: -18px; padding: 3px; position: absolute; color: #2BBC8C">调试</span>-->
                <!--</el-button>-->
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
      <point-list-table v-if=" this.active ==='2' " :pointCid = 'toPointList' :activStatus = this.active  v-on:tabStaus = "tabStaus"  ></point-list-table>
    </div>
    <update-equip v-if="updateEquipFalse" :updateEquip = 'updateEdata' @giveFalse="UdialogReturn" :pid = 'projectPid'  v-on:diaStatus = "diaStaus"  ></update-equip>
    <view-equip-dialog v-if="viewEquipFalse" :viewEquip = 'viewData' @giveFalse="VdialogReturn"></view-equip-dialog>
    <!--<add-equip-dialog v-if="addEquipFalse" @giveFalse="addDialogReturn" :pid = 'projectPid' :gid = 'projectGid'></add-equip-dialog>-->
  </div>
</template>
<script>
  import orgdelete from '@/views/managementSide/mSiteAdmin/components/delete'
  import LeftTree from '@/components/Tree/index.vue'
  import updateEquip from './updateEquipDialog'
  import deleteDialog from './delete'
  import pointListTable from './pointListTable'
  import viewEquipDialog from './viewEquipDialog'
  import addEquipDialog from '@/components/Tree/addEquipDialog'
  import detail from '@/assets/components/detail.png'
  import redact from '@/assets/components/redact.png'

  import wraningDelete from '@/assets/components/wraningDelete.png'
  import treeBus from '@/components/Tree/bus.js'
  import axios from 'axios'
  // import vueZtree from './vueZtree'
  export default {
    name: 'engineeering',
    components: {
      updateEquip,
      deleteDialog,
      pointListTable,
      viewEquipDialog,
      addEquipDialog,
      orgdelete,
      LeftTree
    },
    data() {
      return {
        restatus: '更新',
        projectGid: '',
        projectName: '',
        toPointList: '', // 传给子组件的cid
        viewData: {}, // 查看设备信息
        updateEdata: {}, // 修改设备信息
        pointListInfo: false, // 是否显示测点列表
        detail,
        redact,
        wraningDelete,
        active: '1',
        reactive: '1',
        projectPid: this.$route.query.pid,
        tableStatus: '1',
        tableSta: '2',
        /**
         *  左侧树 start
         * */
        ztreeDataSource: [],
        defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf: 'leaf'
        },
        dataList: [],
        treeDeepCopy: [],
        parentNodeModel: [], // 当前点击节点父亲对象
        nodeModel: null, // 当前点击节点对象
        ztreeDataSourceList: [],
        ztreeDataSourceSync: [],
        /**
         *  左侧树 end
         * */
        // 编辑框显示
        updateEquipFalse: false,
        viewEquipFalse: false,
        addEquipFalse: false,
        cols: [
          { prop: 'cid', label: '设备编号', width: '170px', sortable: true },
          { prop: 'name', label: '设备名称', width: '200px', sortable: true },
          { prop: 'gid', label: '并发名称', width: '150px', sortable: true },
          { prop: 'type', label: '通讯类型', width: '150px' },
          { prop: 'param', label: '通讯参数', sortable: true }
        ],
        projectData: [],
        // 设备数据
        projectdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'object_condition',
          pid: 'ZD201809000001',
          data: {
            condition: {
              gid: '',
              cid: '',
              name: '',
              brand: '',
              catagory: '',
              param: '',
              type: '',
              addr: '',
              attris_file: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        total: 0,
        // 删除设备
        delSubmitData: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'object_del',
          pid: this.$route.query.pid,
          del: []
        },
        // 添加并发
        addCofigSubmitData: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'object_goroutine_add',
          pid: this.$route.query.pid,
          gid: ''
        },
        // 删除并发
        deleteCofigSubmitData: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'object_goroutine_del',
          pid: this.$route.query.pid,
          del: []
        },
        // 修改并发
        updateCofigSubmitData: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'object_goroutine_mod',
          pid: this.$route.query.pid,
          data: {
            name: 'gid',
            des: '',
            oldvalue: '0001',
            newvalue: '0003'
          }
        }

      }
    },
    mounted() {
      this.engineData()
    },
    computed: {
      tableTree: {
        get() {
          return this.$store.state.tableTree
        },
        set(newValue) {
          this.$store.commit('setTableTree', newValue)
        }
      }
    },
    methods: {
      // 重构tree end
      /*
      treeStart*/
      clickParent() {
        this.$refs.mychild.queryData()
      },
      queryData() {
        // 资源树总览
        this.submitdata.pid = this.projectPid
        axios.post('/project', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.ztreeDataSource.push(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },

      findById(data, parentId) {
        var vm = this

        for (var i = 0; i < data.length; i++) {
          if (parentId === data[i].id) {
            vm.dataList.push(data[i])
            vm.findById(vm.ztreeDataSource, data[i].parentId)
            return data[i]
          }

          if (data[i].hasOwnProperty('children')) {
            vm.findById(data[i].children, parentId)
          }
        }
      },
      // 点击节点
      nodeClick(m, parent, trees) {
        this.treeDeepCopy = trees
        this.nodeModel = m // 当前点击节点对象
        this.parentNodeModel = parent // 当前点击节点父亲对象
        // 导航菜单
        this.dataList = []
        this.findById(this.ztreeDataSource, m.parentId)
        this.dataList = this.dataList.reverse()
        this.dataList.push(m)
      },
      // 右击事件
      contextmenuClick(m) {
        this.showAddEquip()
      },
      // 修改并发接口
      SaveEdit(parentNode, data, next) {
        /*
        var param = {
          isAdd: data.isAdd,
          parentNode: parentNode,
          node: data
        }*/
        this.updateCofigSubmitData.data.name = data.name
        this.updateCofigSubmitData.data.oldvalue = data.name // 原始gid
        this.updateCofigSubmitData.data.newvalue = data.name // 修改后的gid
        axios.post('/project', this.updateCofigSubmitData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.errcode === '00000') {
            if (data.isAdd) {
              next(false, res.body.data.name)
            } else {
              next(true)
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
        /*
        this.$http.post(this.HOST + '/admin/system/tree/edit', param).then((response) => {
          if (response.status === 200) {
            if (data.isAdd) {
              next(true, response.body.data.tid)
            } else {
              next(true)
            }
          }
        })*/
      },
      // 删除组织树
      DelNode(parentNode, data, next) {
        console.log(111, parentNode)
        console.log(22, data)
        console.log(33, next)
        var deleteName = []
        deleteName.push(data.name)
        this.deleteCofigSubmitData.pid = this.projectPid
        this.deleteCofigSubmitData.del = deleteName
        this.$confirm('确认删除设备？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          axios.post('/project', this.deleteCofigSubmitData, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            if (res.data.errcode === '00000') {
              this.restar()
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            }
            // window.location.reload()
            /*
            if (res.errcode === '00000') {
              next(true)
            }*/
          })
        }).catch(() => {

        })
      },
      // 保存成功返回的状态
      /*
      treeEnd*/
      tabStaus: function(activStatus) {
        console.log(activStatus)
        this.active = activStatus
      },
      // 修改成功监听刷新列表
      diaStaus: function(dialogStatus) {
        this.reactive = dialogStatus
        this.engineData()
      },
      showUpdateMask(row, index) {
        this.updateEdata = index
        this.updateEquipFalse = !this.updateEquipFalse
      },
      // 父组件接收值
      UdialogReturn(data) {
        this.updateEquipFalse = data // data仅仅代表参数 这里等同于子组件roleDialogMask
      },
      showViewEquip(row, index) {
        this.viewData = index
        this.viewEquipFalse = !this.viewEquipFalse
      },
      // 父组件接收值
      VdialogReturn(data) {
        this.viewEquipFalse = data // data仅仅代表参数 这里等同于子组件roleDialogMask
      },
      showAddEquip() {
        this.addEquipFalse = !this.addEquipFalse
      },
      // 添加设备
      addDialogReturn(data) {
        this.addEquipFalse = data
      },
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate)
      },
      handleNodeClick(data) {
        console.log(data.gid)
        this.projectGid = data.gid
        this.projectName = data.name
        this.engineData()
      },
      // 删除成功返回的状态
      restar() {
        treeBus.$emit('rerule', this.restatus)
      },
      // 删除设备
      deleteEqquip(index, row) {
        var deleteid = []
        deleteid.push(row.cid)
        this.delSubmitData.del = deleteid
        this.$confirm('确认删除设备？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          axios.post('/project', this.delSubmitData, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.engineData()
            this.restar()
            // this.clickParent()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
        }).catch(() => {
        })
      },
      // 获取设备总览
      engineData() {
        this.projectdata.pid = this.projectPid
        this.projectdata.data.condition.gid = this.projectGid
        // this.projectdata.data.condition.name = this.projectName
        axios.post('/project', this.projectdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.projectData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.projectdata.data.page.page_number = (val) + ''
        this.engineData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.projectdata.data.page.page_size = (pageSize) + ''
        this.engineData()
      },
      viewPointList(index, row) {
        this.active = '2'
        console.log(row.cid)
        this.toPointList = row.cid
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .engineeering{
    width: 100%;
    height: 600px;
    overflow: auto;

    .engineeeringLeft{
      width: 20%;
      height: 580px;
      background-color: #EAEDF1;
      overflow: auto;
      float: left;
    }
    /deep/ .gutter{
      background-color: #D8DEE8;
    }
    /deep/  .el-table td{
      border-bottom: none;
      border-right: none;
      padding: 2px 0;
    }
    .engineeeringRight{
      width:79%;
      height: 580px;
      float: right;
      /deep/ .el-table th.is-leaf, .el-table td {
        border-bottom: 1px solid #fff;
      }
      .viewDetail{
        padding: 2px 9px 3px 14px;
        background: url('../../../../../assets/reports/detail_normal.png') no-repeat center;
      }
      .viewDetail:hover{
        cursor: pointer;
        padding: 2px 9px 3px 14px;
        background: url('../../../../../assets/reports/detail_hover.png') no-repeat center;
      }
      .update{
        padding: 2px 9px 3px 14px;
        background: url('../../../../../assets/reports/redact_normal.png') no-repeat center;
      }
      .update:hover{
        cursor: pointer;
        padding: 2px 9px 3px 14px;
        background: url('../../../../../assets/reports/redact_hover.png') no-repeat center;
      }
      .delete{
        padding: 2px 9px 3px 14px;
        background: url('../../../../../assets/reports/delete_normal.png') no-repeat center;
      }
      .delete:hover{
        cursor: pointer;
        padding: 2px 9px 3px 14px;
        background: url('../../../../../assets/reports/delete_hover.png') no-repeat center;
      }
      .Etitle{
        width: 100%;
        height: 50px;
        font-size:14px;
        font-family:MicrosoftYaHei-Bold;
        font-weight:bold;
        color:rgba(50,56,66,1);
        background-color: #F0F3F5;
        line-height: 50px;
        padding-left: 20px;
      }
      .ETableList{
        width: 100%;
        min-height: 100px;
        /deep/ .el-table td{
          border-bottom: none;
          border-right: none;
          padding: 0px 0;
        }
      }

    }
    .footerPage{
      height: 30px;
      margin-top: 5px;
      margin-bottom: 5px;
      float: right;
      right:20px;
      position: relative;
    }
    .tableIcon {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #25B7C8;
    }
    .Measuring{
      margin-left: 15px;
    }
    .debug{
      margin-left: 60px;
    }
    /deep/ .delete {
      display: inline;
      margin-left: 5px;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    // 左侧树的样式
    .el-tree {
      position: relative;
      cursor: default;
      background: #EAEDF1;
      color: #606266;
    }
  }

</style>
